<template>
  <div class="app-container">
    <el-drawer title="产品入库单详情" :visible.sync="showFlag" size="80%" :append-to-body="true">
      <template v-slot:title>
        <span class="titleDiv">产品入库单详情</span>
      </template>
      <div style="padding: 0 20px;">
        <el-tag size="large" style="font-size: 20px;">基本信息</el-tag>
        <hr />
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>入库单编号：</span>
              <span>{{ form.recptCode || '--'}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>生产工单编码：</span>
              <span>{{ form.workorderCode || '--'}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>单据状态：</span>
              <span>
                <dict-tag :options="dict.type.mes_order_status" :value="form.status" />
              </span>
            </div>
          </el-col>
        </el-row>
        <el-tag size="large" style="font-size: 20px; margin-bottom: 10px; margin-top: 10px">产品列表</el-tag>
        <hr />
        <el-table v-loading="loading" :data="routeproductbomList" height="73vh">
          <el-table-column label="序号" align="center" width="50px" prop="issueCode">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" prop="itemCode" >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleView(scope.row)"
              >{{scope.row.itemCode}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" prop="itemName" />
          <el-table-column label="规格型号" align="center" prop="specification" />
          <el-table-column label="单位" width="100" align="center" prop="unitOfMeasure" />
          <el-table-column label="数量" width="100" align="center" prop="quantityRecived" />
          <!-- <el-table-column label="订单单号" width="120" align="center" prop="forderNo" /> -->
          <el-table-column label="批次号" width="100" align="center" prop="batchCode" />
          <el-table-column label="仓库名称" width="100" align="center" prop="warehouseName" />
          <!-- <el-table-column label="是否完成质检单" width="150" align="center" prop="isFinishQuality">
            <template slot-scope="scope">
              <span>{{ scope.row.isFinishQuality == '0' ?'否':'是' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="质检合格数量" align="center" width="150px" prop="qualifiedQuantity" />
          <el-table-column label="质检不合格数量" align="center" width="150px" prop="unqualifiedQuantity" />
          <el-table-column label="备注" width="80" align="center" prop="fnoteEntry" /> -->
        </el-table>
      </div>
    </el-drawer>

    <Details v-if="open" ref="detailDialogs"></Details>
  </div>
</template>
    
<script>
import {
  listProductproduceline,
  getGoods,
  delGoods,
  addGoods,
  updateGoods
} from "@/api/mes/wm/productrecpt";
import Details from "./materialDetail.vue";
export default {
  dicts: ["mes_order_status", "sys_fentry_status"],
  components: { Details },
  data() {
    return {
      // 是否显示弹出层
      showFlag: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      recptId: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产补料详细信息表格数据
      detailList: [],
      // 弹出层标题
      title: "",

      //勾选的内容
      selectData: null,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialSerial: null,
        productCode: null,
        productName: null,
        productSpec: null,
        measureName: null,
        itemAmount: null,
        id: null,
        suppyTime: null,
        workorderCode: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //审批人
      personList: [],
      //处于哪个环节
      activeStep: null,
      stepResult: null,
      warehouseList: [],
      routeproductbomList: []
    };
  },
  created() {},
  methods: {
    init(row) {
      
      this.form = row;
      //调接口需要的id
      console.log(this.form, "子组件的row");
      this.recptId = row.recptId;
      this.showFlag = true;
      this.getDetail();
    },
    getDetail() {
      this.loading = true;
      listProductproduceline({recptId:this.recptId}).then(response => {
        this.routeproductbomList = response.rows || {};
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        materialSerial: null,
        productCode: null,
        productName: null,
        productSpec: null,
        measureName: null,
        itemAmount: null,
        id: null,
        suppyTime: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null
      };
      this.personList = [];
      //处于哪个环节
      this.activeStep = null;
      this.stepResult = null;
      this.warehouseList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleView(row){
      this.open = true;
      console.log(row, "====row-====");
      this.$nextTick(() => {
        this.$refs.detailDialogs.init(row);
      });
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
.tabsDiv {
  padding: 20px;
  padding-top: 0;
}
.tabsDiv ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  font-weight: 700;
  font-size: 18px;
}
.drawerFooter {
  text-align: right;
  padding: 20px;
}
.bg-purple {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 30px;
  // span:nth-child(1) {
  //   display: inline-block;
  //   width: 160px;
  //   white-space: nowrap;
  //   line-height: 30px;
  // }
}
.dialog-footer {
  padding-top: 20px;
  text-align: center;
}
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}
</style>
    